<script setup lang="ts">
import { ref, defineProps, defineEmits, watch } from 'vue';
const props = defineProps({
    visible: {
        type: Boolean,
        required: true,
    }
});
const emits = defineEmits(['update:visible']);

const closeModal = () => {
    emits('update:visible', false);
};
watch(() => props.visible, (newVal) => {
    if (newVal) {
        hidePopup.value = false
    }
})
const hidePopup = ref(false)
const hideBottons = () => {
    hidePopup.value = true;
};

</script>
<template>
    <view v-if="visible" class="modal-overlay" @click="closeModal">
        <view class="modal-content" @click.stop>
            <!-- <slot>
                插槽内容
            </slot> -->
            <view class="oin-box" @click="hideBottons">
                <view class="top-box">
                    <view class="bus"><button class="bous"></button></view>
                    <!-- <text class="hus">50回复</text> -->
                    50回复
                </view>
                <view class="mids-boxs">
                    <view v-for="index in 8" :key="index">
                        <view class="mi-box">
                            <view class="top1-boxs">
                                <image src="https://gitcode.net/qq_44112897/images/-/raw/master/comic/15.jpg"
                                    class="lef-imgs"></image>
                                <view class="mid-name">
                                    <text class="t1">用户昵称</text>
                                    <text class="t2">一天前&nbsp;.贵州</text>
                                </view>
                                <uni-icons type="heart" size="30" class="reg-xin"></uni-icons>
                            </view>
                            <text class="mod1-boxs">XXXXXXXXXXXXXXXXXXXXXXX</text>
                            <text class="bot1-boxs">用户昵称：XXXXXXXXXXXXXXXXXXXXX</text>
                        </view>
                    </view>
                </view>
                <view v-if="!hidePopup" class="bottons" @click.stop>
                    <view class="top2-boxs">
                        <view class="comment-box">
                            <input type="text" name="" value="" placeholder="写下你的评论..." class="com-box">
                        </view>
                        <view class="god">
                            <uni-icons type="chat-filled" size="32" class="gods"></uni-icons>
                            <text class="tl1">50</text>
                        </view>
                        <view class="xi">
                            <uni-icons type="hand-up-filled" size="32" class="xis" color="rgb(242,187,22)"></uni-icons>
                            <text class="tl2">101</text>
                        </view>
                        <view class="s1">
                            <image src="/static/images/share-2.png" mode="scaleToFill" class="f1" />
                            <text class="tl3">10</text>

                        </view>
                    </view>
                    <view class="q1">
                        <image src="/static/images/编组.png" mode="scaleToFill" class="mas" />
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<style scoped lang="scss">
.modal-overlay {
    position: fixed;
    top: 30rpx;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: white;
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    width: 100%;
    max-width: 1000rpx;
}

.oin-box {
    display: flex;
    width: 750rpx;
    height: 900rpx;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    flex-direction: column;
}

.top-box {
    height: 96rpx;
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;

    .bus {
        height: 38rpx;
        width: 200rpx;
        display: flex;
        margin-left: 280rpx;

        .bous {
            display: flex;
            margin-top: 14rpx;
            width: 100rpx;
            height: 10rpx;
            font-size: 24rpx;
            background: #000000;
        }
    }


    .hus {
        display: flex;
        margin-left: 280rpx;
        justify-content: center;
        align-items: center;
        width: 178rpx;
        height: 60rpx;
        font-size: 38rpx;
        font-family: PingFang SC, PingFang SC-500;
        font-weight: 500;
        text-align: CENTER;
        color: #000000;
        line-height: 38rpx;
    }


}

.mids-boxs {
    height: 1000rpx;
    display: flex;
    overflow-y: scroll;
    // margin: 0 63rpx;
    flex-direction: column;

    .mi-box {
        display: flex;
        flex-direction: column;
        width: 636rpx;
        height: 214rpx;
        margin-left: 60rpx;
        margin-bottom: 20rpx;

        .top1-boxs {
            display: flex;
            margin-top: 20rpx;
            height: 96rpx;
            width: 100%;
            flex-direction: row;

            .lef-imgs {
                width: 90rpx;
                height: 90rpx;
                border-radius: 50%;
                background: #ffffff;
                border: 2rpx solid #c0bfbf;
            }

            .mid-name {
                margin-left: 20rpx;
                height: 70rpx;
                width: 300rpx;
                display: flex;
                flex-direction: column;

                .t1 {
                    justify-content: center;
                    align-items: center;
                    height: 40rpx;
                    font-size: 26rpx;
                    font-family: PingFang SC, PingFang SC-500;
                    font-weight: 500;
                    text-align: left;
                    color: #000000;
                    line-height: 36rpx;
                }

                .t2 {
                    justify-content: center;
                    align-items: center;
                    height: 30rpx;
                    font-size: 20rpx;
                    font-family: PingFang SC, PingFang SC-500;
                    font-weight: 500;
                    text-align: left;
                    color: #c0bfbf;
                    line-height: 28rpx;
                }
            }

            .reg-xin {
                height: 60rpx;
                width: 60rpx;
                background: #ffffff;
                margin-left: 140rpx;
            }

        }

        .mod1-boxs {
            margin-top: 10rpx;
            display: flex;
            width: 428rpx;
            height: 36rpx;
            margin-left: 100rpx;
            font-size: 24rpx;
            font-family: PingFang SC, PingFang SC-500;
            font-weight: 500;
            text-align: CENTER;
            color: #000000;
            line-height: 28rpx;
        }

        .bot1-boxs {
            display: flex;
            margin-left: 30rpx;
            width: 570rpx;
            height: 70rpx;
            background: #f0f0f0;
            justify-content: center;
            align-items: center;
            font-size: 24rpx;
            font-family: PingFang SC, PingFang SC-500;
            font-weight: 500;
            text-align: CENTER;
            color: #000000;
            line-height: 28rpx;
        }


    }
}

.bottons {
    position: fixed;
    display: flex;
    height: 142rpx;
    width: 100%;
    bottom: 0;
    z-index: 999;
    flex-direction: column;
    background: #ffffff;

    .top2-boxs {
        display: flex;
        flex-direction: row;
        height: 100rpx;
        width: 750rpx;

        .comment-box {
            display: flex;
            margin-top: 20rpx;
            margin-left: 76rpx;
            width: 304rpx;
            height: 55rpx;
            border-radius: 10rpx;
            background: #f0f0f0;

            .com-box {
                display: flex;
                margin-top: 5rpx;
                margin-left: 18rpx;
                justify-content: center;
                align-items: center;
                width: 188rpx;
                height: 30rpx;
                font-size: 28rpx;
                font-family: PingFang SC, PingFang SC-500;
                font-weight: 500;
                text-align: left;
                color: #545050;
                line-height: 28rpx;
            }
        }

        .god {
            display: flex;
            margin-left: 40rpx;
            margin-top: 20rpx;
            width: 55rpx;
            height: 78rpx;
            flex-direction: column;

            .gods {
                display: flex;
                width: 55rpx;
                height: 55rpx;
            }

            .tl1 {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 30rpx;
                font-family: PingFang SC, PingFang SC-500;
                font-weight: 500;
                text-align: CENTER;
                line-height: 28rpx;
                color: #545050;
            }
        }

        .xi {
            display: flex;
            margin-left: 50rpx;
            margin-top: 20rpx;
            width: 55rpx;
            height: 78rpx;
            flex-direction: column;

            .xis {
                display: flex;
                width: 55rpx;
                height: 55rpx;
            }

            .tl2 {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 30rpx;
                font-family: PingFang SC, PingFang SC-500;
                font-weight: 500;
                text-align: CENTER;
                line-height: 28rpx;
                color: rgb(242, 187, 22);
            }
        }

        .s1 {
            display: flex;
            margin-left: 50rpx;
            margin-top: 25rpx;
            width: 55rpx;
            height: 78rpx;
            flex-direction: column;
        }

        .f1 {
            display: flex;
            width: 48rpx;
            height: 48rpx;
        }

        .tl3 {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30rpx;
            font-family: PingFang SC, PingFang SC-500;
            font-weight: 500;
            text-align: CENTER;
            line-height: 28rpx;
        }
    }



    .q1 {
        display: flex;
        position: absolute;
        margin-top: 76rpx;
        width: 750rpx;
        height: 68rpx;
        z-index: 999;

        .mas {
            display: flex;
            width: 750rpx;
            height: 68rpx;
        }
    }
}
</style>
